Environment Setup: Contentful Challenges

General flow for Contentful challenges/tasks

Scope and context will be different for each challenge/task. It is important that you read the specification carefully and if you feel confused at all please ask the copilot any questions you may have.

The setup environment and import/export data remain constant across these challenges. Also, note that preparing your environment is a one-time task. Once completed, you won’t need to waste time preparing for future challenges.

General pseudo flow:

Deploy and run community-app locally;
Setup local environment;
Import core models and challenge/task data;
Work on requirements;
Submit the export file and credentials of your space for review as a deliverable.

How to deploy and run community-app locally to work on Contentful challenges?

Disclaimer: Current instructions are biased towards Ubuntu 18.04 LTS. However, similar recipes should work for other OS. If you have trouble, contact the copilot in your challenge forum.

Find latest code base in the community-app repository.

1. You should have the following prerequisites:

NodeJS 8.x - other recent versions not confirmed to work yet. Please, stick to node 8. For managing node, you can use nvm.
Python 2.7.

2. Install dependencies

$ npm install - Installs all dependencies. Recommended for local development.

3. Set environment variables:

It is not feasible to have a common Contentful environment for development. You should register for your own free Contentful account(yes, it is free) and use it for development and testing. We have prepared an [env file]((https://gist.github.com/kkartunov/594dc65f76bac6aa800b4764cae72d2e) you can use to start. Fill in the required keys and then just source set-env-TC.sh to source it.

How to get your keys is described in this Contentful help guide.

4. Build the app

To build the app’s frontend run:

$ npm run build

The result of the build will be output into the /build folder.

5 . To run the app use:

$ npm start - To run the app in normal mode. The frontend will be served from the /build folder. The Topcoder backend to be used will be chosen depending on the NODE_CONFIG_ENV value.
$ npm run dev - To run the app with development tools. In this case, the frontend is built in memory by the server and uses dev tools like redux-devtools. The Topcoder backend to be used will be chosen depending on the NODE_CONFIG_ENV value. This demands dev dependencies to be installed in the first step.

At this point you should access /etc/hosts and add the line 127.0.0.1 local.topcoder-dev.com. To run the app locally against the Topcoder development backend, you can access the app at local.topcoder-dev.com:3000. To login to the Topcoder backend, use accounts.topcoder-dev.com/members. Log out at www.topcoder-dev.com, or just wipe out auth cookies. For login credentials ask the copilot in the challenge forum to provide you with access.

Importing/exporting data to/from Contentful spaces

Most of the time you will need data in your space to work with. We have you covered as we provide the needed.

Please, setup the Contentful CLI in your environment and configure it with your credentials. Following that, take some time to read Importing and exporting content with the Contentful CLI guide.

We provide core models export files for working with TC Contentful spaces. Please, download and import according to your task:
Community Core Models
Thrive Core Models

To import use:

contentful space import --space-id <add here> --mt <add here> --content-file ./tc-core.json

or

contentful space import --space-id <add here> --mt <add here> --content-file ./thrive-core.json

Now that you have the tool and your space is prepared with proper content models you can import(command above just change file name) the data given to you for the task/challenge.

Using the preview endpoints of community-app to see/test your work

During your work on the requirements, you will need to see what is happening and if everything is working as expected. To do this, you should use the preview endpoints. To set these up in your space, check out this guide.

At this point, you will be able to access almost all content types using links like:

http://local.topcoder-dev.com:3000/examples/contentful/{COMPONENT_NAME}/{COMPONENT_ID}?spaceName=XXX
Note: spaceName is required only for other spaces than the default one which is the community space.

Where can I find the TC Contentful docs?

We keep all documents and try to have them up-to-date in this repository.

Challenge/task submission

For most challenges, once you have fulfilled the requirements, we will need to request an export file from your Contentful space as your deliverable. To obtain one you can use:

contentful space export --space-id <add here> --mt <add here> --content-file ./submission-TCHandle.json

In some cases, we will ask you to share credentials to your space so we can review directly from it running our instance of community-app.